<template>
  <view class="building-detail">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="handleBack">
        <text class="iconfont icon-back">←</text>
      </view>
      <text class="nav-title">{{building.name}}</text>
    </view>

    <!-- 建筑预览 -->
    <view class="building-preview">
      <image class="building-image" :src="building.image" mode="aspectFit"></image>
      <view class="building-status">
        <view class="status-item">
          <text class="label">等级</text>
          <text class="value">{{building.level}}</text>
        </view>
        <view class="status-item">
          <text class="label">状态</text>
          <text class="value" :class="building.status">{{getStatusText}}</text>
        </view>
      </view>
    </view>

    <!-- 建筑属性 -->
    <view class="building-attributes">
      <view class="attribute-item" v-for="(attr, index) in buildingAttributes" :key="index">
        <view class="attr-icon">
          <image :src="attr.icon" mode="aspectFit"></image>
        </view>
        <view class="attr-info">
          <text class="attr-name">{{attr.name}}</text>
          <text class="attr-value">{{attr.value}}</text>
          <text class="attr-next" v-if="attr.next">下一级: {{attr.next}}</text>
        </view>
      </view>
    </view>

    <!-- 升级组件 -->
    <building-upgrade
      :building="building"
      :userResources="userResources"
      :userItems="userItems"
      @upgrade-start="handleUpgradeStart"
      @upgrade-complete="handleUpgradeComplete"
      @speed-up="handleSpeedUp"
      @use-speed-item="handleUseSpeedItem"
    ></building-upgrade>

    <!-- 提示弹窗 -->
    <uni-popup ref="messagePopup" type="message">
      <uni-popup-message
        :type="messageType"
        :message="messageContent"
        :duration="2000"
      ></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
import BuildingUpgrade from '@/components/BuildingUpgrade.vue'
import { BUILDING_TYPES, BUILDING_TEMPLATES } from '@/config/buildings.js'

export default {
  components: {
    BuildingUpgrade
  },
  data() {
    return {
      building: {
        id: '',
        name: '',
        level: 1,
        image: '',
        status: 'normal',
        description: '',
        attributes: {}
      },
      userResources: {
        gold: 10000,
        wood: 5000,
        stone: 3000,
        iron: 2000,
        diamond: 100
      },
      userItems: {
        scroll_1h: 5,
        scroll_8h: 2,
        scroll_24h: 1
      },
      messageType: 'success',
      messageContent: ''
    }
  },
  computed: {
    getStatusText() {
      const statusMap = {
        normal: '空闲',
        upgrading: '升级中',
        working: '工作中'
      }
      return statusMap[this.building.status] || '未知'
    },
    buildingAttributes() {
      const attrs = this.building.attributes || {}
      return [
        {
          name: '生产效率',
          icon: '/static/icons/efficiency.png',
          value: `${attrs.efficiency || 0}/小时`,
          next: attrs.nextEfficiency ? `${attrs.nextEfficiency}/小时` : null
        },
        {
          name: '存储容量',
          icon: '/static/icons/storage.png',
          value: attrs.storage || 0,
          next: attrs.nextStorage || null
        },
        {
          name: '防御力',
          icon: '/static/icons/defense.png',
          value: attrs.defense || 0,
          next: attrs.nextDefense || null
        }
      ]
    }
  },
  onLoad(options) {
    // 从本地存储加载游戏状态
    const gameState = uni.getStorageSync('empireGameState')
    if (gameState) {
      const state = JSON.parse(gameState)
      this.userResources = state.resources
      
      // 根据ID获取建筑信息
      const building = state.buildings.find(b => b.id === options.id)
      if (building) {
        this.building = building
      }
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    },
    handleUpgradeStart(data) {
      // 扣除资源
      Object.entries(data.resources).forEach(([type, amount]) => {
        this.userResources[type] -= amount
      })
      
      // 更新建筑状态
      this.building.status = 'upgrading'
      
      // 显示提示
      this.showMessage('success', '升级开始')
      
      // 保存状态
      this.saveGameState()
    },
    handleUpgradeComplete(data) {
      // 更新建筑等级和状态
      this.building.level += 1
      this.building.status = 'normal'
      
      // 更新建筑属性
      if (this.building.attributes) {
        const type = BUILDING_TYPES[this.building.type]
        const template = BUILDING_TEMPLATES[this.building.id]
        
        if (type && template) {
          // 更新当前属性
          Object.keys(this.building.attributes).forEach(key => {
            if (key.startsWith('next')) {
              const baseKey = key.replace('next', '').toLowerCase()
              this.building.attributes[baseKey] = this.building.attributes[key]
            }
          })
          
          // 计算下一级属性
          Object.keys(this.building.attributes).forEach(key => {
            if (!key.startsWith('next')) {
              const bonus = type.upgradeEffects[key + 'Bonus'] || 1.2
              this.building.attributes['next' + key.charAt(0).toUpperCase() + key.slice(1)] = 
                Math.floor(this.building.attributes[key] * bonus)
            }
          })
        }
      }
      
      // 处理升级完成事件
      if (data.event) {
        this.handleUpgradeEvent(data.event)
      }
      
      // 显示提示
      this.showMessage('success', '升级完成！')
      
      // 保存状态
      this.saveGameState()
    },
    handleSpeedUp(data) {
      // 扣除钻石
      this.userResources.diamond -= data.diamondCost
      
      // 显示提示
      this.showMessage('success', '加速成功！')
      
      // 保存状态
      this.saveGameState()
    },
    handleUseSpeedItem(data) {
      // 扣除加速道具
      this.userItems[data.itemId] -= 1
      
      // 显示提示
      this.showMessage('success', '使用加速道具成功！')
      
      // 保存状态
      this.saveGameState()
    },
    handleUpgradeEvent(event) {
      switch (event.type) {
        case 'defense_boost':
          // 实现临时防御加成效果
          this.showMessage('info', `获得临时防御加成：+${(event.value - 1) * 100}%`)
          break
      }
    },
    showMessage(type, content) {
      this.messageType = type
      this.messageContent = content
      this.$refs.messagePopup.open()
    },
    saveGameState() {
      const gameState = uni.getStorageSync('empireGameState')
      if (gameState) {
        const state = JSON.parse(gameState)
        
        // 更新资源
        state.resources = this.userResources
        
        // 更新建筑信息
        const buildingIndex = state.buildings.findIndex(b => b.id === this.building.id)
        if (buildingIndex !== -1) {
          state.buildings[buildingIndex] = this.building
        }
        
        uni.setStorageSync('empireGameState', JSON.stringify(state))
      }
    }
  }
}
</script>

<style>
.building-detail {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;
}

.nav-bar {
  height: 88rpx;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  padding: 20rpx;
  margin-left: -20rpx;
}

.icon-back {
  font-size: 36rpx;
  color: #333;
}

.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.building-preview {
  background: #fff;
  padding: 40rpx;
  margin-bottom: 20rpx;
}

.building-image {
  width: 100%;
  height: 400rpx;
  margin-bottom: 30rpx;
}

.building-status {
  display: flex;
  justify-content: space-around;
}

.status-item {
  text-align: center;
}

.label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
  display: block;
}

.value {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.value.upgrading {
  color: #ff9800;
}

.value.working {
  color: #4caf50;
}

.building-attributes {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.attribute-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.attribute-item:last-child {
  border-bottom: none;
}

.attr-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.attr-icon image {
  width: 100%;
  height: 100%;
}

.attr-info {
  flex: 1;
}

.attr-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.attr-value {
  font-size: 32rpx;
  color: #4caf50;
  font-weight: bold;
}

.attr-next {
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
}
</style> 